<template>
<div>

  <van-button type="primary" text="显示遮罩层" @click="show = true" />
  <van-overlay :show="show" @click="show = false">
    <div class="wrapper" @click.stop>
      <div class="block" style="padding: 30px;box-sizing: border-box;border-radius: 10px ">
        <div >
          <input type="text" v-model="city" placeholder="最后加市" style="width: 100px">
          <button @click="press" style="border-radius: 10px">查询</button>
<!--          <p>地址：{{list.address}}</p>-->
          <van-field v-model="text" label="地址:{{list.address}}" />
          <p>时间：{{list.reportTime}}</p>
          <p>湿度：{{list.humidity}}</p>
          <p>温度：{{list.temp}}</p>
          <p>天气：{{list.weather}}</p>
          <p>风向：{{list.windDirection}}</p>
          <p>风力：{{list.windPower}}</p>
          <div style="width: 100px;margin: auto">
            <button @click="show = false" style="width: 100px;border-radius: 10px">关闭</button>
          </div>
        </div>


      </div>
    </div>
  </van-overlay>
</div>
</template>

<script>
import {epidemic} from "@/api/http";
import {Toast} from "vant";

export default {
name: "epidemic",
  data(){
  return {
    show:false,
    city:'',
    list:[]
  }
  },
  methods:{
    press(){
      epidemic(this.city).then(res=>{
        // console.log(res)

        if(res.code != 1){
          Toast.fail('输入城市错误！');
        }else {
          this.list = res.data
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  margin: auto;
  //height: 120px;
  background-color: #fff;
}
</style>